<template>
  <div class="moment-container" :id="'mom_' + momentDetail.id">
    <el-card class="moment" body-style="" shadow="hover">
      <!--suppress HtmlUnknownAttribute -->
      <template #header>
        <div class="user-publish" style="text-align: left">
          {{ momentDetail.dateTime }}
        </div>
      </template>
      <div class="user-detail-moment">
        <div class="user-detail">
          <div class="user-info">
            <el-avatar
              v-if="momentDetail.avatar === ''"
              class="user-avatar"
              icon="el-icon-user-solid"
              size="middle"
            ></el-avatar>
            <el-avatar
              v-else
              class="user-avatar"
              size="middle"
              :src="momentDetail.avatar"
            ></el-avatar>
            <div class="user-username">{{ momentDetail.username }}</div>
          </div>
        </div>
        <div class="blank" style="flex: 2"></div>
        <div class="user-moment">
          <div class="user-content">{{ momentDetail.content }}</div>
          <div class="user-code" v-if="momentDetail.code !== ''">
            <pre>{{ momentDetail.code }}</pre>
          </div>
          <div class="user-img" v-if="momentDetail.imgList !== []">
            <el-image
              style="width: 150px; height: 150px; margin: 5px"
              v-for="img in momentDetail.imgList"
              :key="momentDetail.imgList.indexOf(img)"
              :src="img"
              :preview-src-list="[img]"
            />
          </div>
        </div>
        <el-button-group class="user-operations">
          <el-button type="text" icon="el-icon-chicken">加个鸡腿</el-button>
          <el-button type="text" icon="el-icon-edit">我说两句</el-button>
        </el-button-group>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "PiecesOfMoment",
  props: {
    momentDetail: {
      type: Object,
      default: () => {
        return {
          id: "2333",
          authorId: "0001",
          avatar:
            "https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=d4eb1ea65143fbf2c579ae25804ee6b8/6f061d950a7b02086943044f60d9f2d3562cc891.jpg",
          username: "猫",
          content:
            "我是猫，我是猫，我是猫，我是猫,我是猫，我是猫，我是猫，我是猫，我是猫,我是猫，我是猫，我是猫，我是猫，我是猫,我是猫，我是猫，我是猫，我是猫,我是猫，我是猫，我是猫，我是猫,",
          likeCount: 0,
          dateTime: "2021/9/25 22:22",
          imgList: [
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
          ],
          code: "",
        };
      },
    },
  },
};
</script>

<style lang="sass">
.moment
  min-height: 155px
  margin-bottom: 5px
  .user-detail-moment
    display: flex
    .user-detail
      flex: 100px
    .user-moment
      flex: 90
      text-align: left
      *
        margin-bottom: 5px
      .user-content
        overflow-wrap: anywhere
      .user-publish
        font-size: 15px
        color: #c3c3c3
    .user-operations
      display: flex
      flex-direction: column
</style>
